<template>
  <div>
    <a-modal
      v-model:visible="visible"
      title="查看数据"
      width="800px"
      :footer="null"
      class="lookData"
    >
      <div class="devicecludstatusModel">
        <div class="rowFlex">
          <a-select
            @change="changeTime"
            style="width: 200px; margin-bottom: 10px"
            v-model:value="timeVal"
          >
            <a-select-option value="1">1小时</a-select-option>
            <a-select-option value="2">24小时</a-select-option>
          </a-select>
          <a-radio-group v-model:value="mode" @change="changeMode">
            <a-radio-button value="echart">图表</a-radio-button>
            <a-radio-button value="table">表格</a-radio-button>
          </a-radio-group>
        </div>
        <viewmodelEchrts
          :echrtsData="echrtsData"
          v-if="echrtsData.x.length > 0 && mode == 'echart'"
        />
        <a-table
          v-else
          :scroll="{ y: 300 }"
          size="small"
          bordered
          :dataSource="dataSource"
          :columns="columns"
          :pagination="ipagination"
          :loading="listLoading"
          :rowClassName="setRowClassName"
          @change="handleTableChange"
        />
      </div>
    </a-modal>
  </div>
</template>
<script>
  import { defineComponent, ref, reactive } from 'vue';
  import { attributedata } from '/@/api/sys/gateway/gateway';
  import moment from 'moment';
  import viewmodelEchrts from './viewmodelEchrts.vue';
  export default defineComponent({
    components: { viewmodelEchrts },
    setup() {
      const visible = ref(false);
      const listLoading = ref(false);
      const timeVal = ref('1');
      const mode = ref('echart');
      //分页参数
      const ipagination = reactive({
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '30', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条';
        },
        showSizeChanger: true,
        total: 0,
      });
      //切换时间
      const changeTime = (e) => {
        listQuery.page = 1;
        listQuery.page_size = 10;
        if (e == 1) {
          listQuery.start_time = moment(new Date(new Date().getTime() - 1 * 60 * 60 * 1000)).format(
            'YYYY-MM-DD HH:mm:ss',
          );
          listQuery.end_time = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
        } else {
          listQuery.start_time = moment(
            new Date(new Date().getTime() - 24 * 60 * 60 * 1000),
          ).format('YYYY-MM-DD HH:mm:ss');
          listQuery.end_time = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
        }
        getList();
      };
      //关闭
      const cancel = () => {
        visible.value = false;
      };
      //table隔行背景色
      const setRowClassName = (record, index) => {
        let className = '';
        if (index % 2 === 1) className = 'darkrow';
        return className;
      };
      //分页参数
      const listQuery = reactive({
        page: 1,
        page_size: 10,
        attribute_id: '',
        device_id: '',
        start_time: '',
        end_time: '',
      });
      //获取属性
      function showTable(row, id) {
        listQuery.attribute_id = row.attribute_id;
        listQuery.device_id = id;
        visible.value = true;
        changeTime(1);
      }
      //切换图表和表格
      function changeMode(e) {
        if (e.target.value == 'echart') {
          listQuery.page = undefined;
          listQuery.page_size = undefined;
        } else {
          ipagination.current = 1;
          listQuery.page = 1;
          listQuery.page_size = 10;
        }
        getList();
      }
      //切换分页
      function handleTableChange(ipagina) {
        ipagination.current = ipagina.current;
        listQuery.page = ipagina.current;
        listQuery.page_size = ipagina.pageSize;
        getList();
      }
      const dataSource = ref([]);
      const echrtsData = reactive({
        x: [],
        y: [],
      });
      //获取列表数据
      function getList() {
        listLoading.value = true;
        if (mode.value == 'echart') {
          listQuery.page = undefined;
          listQuery.page_size = undefined;
        }
        attributedata(listQuery).then((res) => {
          ipagination.total = res.total;
          listLoading.value = false;
          echrtsData.x = [];
          let x = [];
          let y = [];
          if (res.list?.length > 0) {
            res.list.map((item) => {
              item.time = moment(parseInt(item.time) * 1000).format('YYYY-MM-DD HH:mm:ss');
              x.push(moment(item.time).format('HH:mm:ss'));
              y.push(item.attribute_value);
            });
            echrtsData.x = x;
            echrtsData.y = y;
          }
          dataSource.value = res.list.sort((a, b) => {
            return b.time < a.time ? -1 : 1;
          });
        });
      }
      return {
        changeMode,
        echrtsData,
        timeVal,
        changeTime,
        listLoading,
        showTable,
        getList,
        handleTableChange,
        ipagination,
        setRowClassName,
        visible,
        mode,
        cancel,
        dataSource,
        listQuery,
        columns: [
          {
            title: '时间',
            dataIndex: 'time',
            key: 'time',
            align: 'center',
          },
          {
            title: '原始值',
            dataIndex: 'attribute_value',
            key: 'attribute_value',
            align: 'center',
          },
        ],
      };
    },
  });
</script>
<style>
  .lookData .ant-modal-close-x {
    width: 38px;
    height: 50px;
    display: flex;
    align-items: center;
  }
</style>
<style lang="less" scoped>
  .rowFlex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .darkrow {
    background-color: #fafafa;
  }
  .title {
    color: #000;
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 15px;
  }
  .devicecludstatusModel {
    padding: 20px 20px 30px;
    box-sizing: border-box;
  }
  .clickRowStyl,
  .ant-table-tbody > .clickRowStyl:hover > td {
    background-color: #f4ac0a;
    color: #fff;
  }

  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
    background: transparent !important;
  }
  .redcolor {
    color: red;
  }
</style>
